<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 
        移动端适配 
        meta为元标签，name="viewport"表示对于视图窗口进行的设置
        content="width=device-width, initial-scale=1.0,user-scalable=no"
        width=device-width页面宽度等于设备宽高，initial-scale=1.0初始缩放比为1表示不缩放，user-scalable=no禁止用户手动缩放
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <!-- 项目图标link:favicon -->
    <link rel="shortcut icon" href="https://img1.baidu.com/it/u=731710723,581112950&fm=26&fmt=auto" type="image/x-icon">
    <!-- 项目网页标题 -->
    <title>课程类型</title>
    <!-- 1.引入响应插件 -->
    <script src="libs/flexible.js"></script>
    <!-- 2.引入css初始化插件 -->
    <link rel="stylesheet" href="libs/reset.css">
    <!-- 3.引入课程类型的样式文件classType.css -->
    <link rel="stylesheet" href="css/classType.css">
    <!-- 4.引入阿里巴巴矢量图标库线上链接 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2994499_hsdv3fhhgrb.css">
    <!-- 5.引入轮播图样式插件 -->
    <link rel="stylesheet" href="libs/swiper.min.css">
    <!-- 8.引入公共样式 -->
    <link rel="stylesheet" href="css/public.css">
</head>
<body>
    <!-- 
        知识点 
        1.伪元素
        2.关键词prev上一个、active当前激活项、next下一个
    -->
    <!-- 上--頂部導航 -->
    <div class="header">
        <!-- 左 -->
        <div>
            <h2 class="active">
                精选课
                <!-- 空标签-用于实现短横线 -->
                <!-- <div></div> -->
            </h2>
            <h2>同步课程</h2>
        </div>
        <!-- 右 -->
        <div>
            <i class="iconfont icon-chaxun"></i>
            <span>高三</span>
            <i class="iconfont icon-xiajiantou""></i>
        </div>
    </div>
    <!-- 中-主要内容 -->
    <!-- 1.banner轮播图 -->
    <div class="banner">
        <!-- 复制API文档代码 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://img2.baidu.com/it/u=2373192874,10551430&fm=26&fmt=auto" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://img0.baidu.com/it/u=537027275,2272480627&fm=26&fmt=auto" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://img1.baidu.com/it/u=1009503372,3839404773&fm=26&fmt=auto" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 2.分类集锦 -->
    <div class="sync_class">
        <!-- 上-标题 -->
        <div class="title">
            <h3>同步课程</h3>
            <a href="#">更多</a>
        </div>
        <!-- 下-内容 -->
        <div class="content">
            <!-- 图片信息 -->
            <img src="imgs/首页_03.png" alt="">
            <!-- 底部信息描述区域 -->
            <div>
                <!-- 左侧 -->
                <div>
                    <h2>一节课让你记住所有的历史朝代，唐宋元明清</h2>
                    <span>12</span>
                    <span>课时</span>
                </div>
                <!-- 右侧 -->
                <button>免费试学</button>
            </div>
        </div>
        <div class="content">
            <!-- 图片信息 -->
            <img src="imgs/首页_03.png" alt="">
            <!-- 底部信息描述区域 -->
            <div>
                <!-- 左侧 -->
                <div>
                    <h2>一节课让你记住所有的历史朝代，唐宋元明清</h2>
                    <span>12</span>
                    <span>课时</span>
                </div>
                <!-- 右侧 -->
                <button>免费试学</button>
            </div>
        </div>
    </div>
    <!-- 3.试题集合 -->
    <div class="sync_class questions">
        <!-- 上-标题 -->
        <div class="title">
            <h3>同步课程</h3>
            <a href="#">更多</a>
        </div>
        <!-- 下-内容 -->
        <div class="content">
            <!-- 图片信息 -->
            <img src="imgs/首页_03.png" alt="">
            <!-- 底部信息描述区域 -->
            <div>
                <!-- 左侧 -->
                <div>
                    <h2>一节课让你记住所有的历史朝代，唐宋元明清</h2>
                    <span>12</span>
                    <span>课时</span>
                </div>
                <!-- 右侧 -->
                <button>免费试学</button>
            </div>
        </div>
        <div class="content">
            <!-- 图片信息 -->
            <img src="imgs/首页_03.png" alt="">
            <!-- 底部信息描述区域 -->
            <div>
                <!-- 左侧 -->
                <div>
                    <h2>一节课让你记住所有的历史朝代，唐宋元明清</h2>
                    <span>12</span>
                    <span>课时</span>
                </div>
                <!-- 右侧 -->
                <button>免费试学</button>
            </div>
        </div>
    </div>
    <!-- 下-底部导航 -->
    <div class="footer">
        <ul>
            <li>
                <a href="index.html">
                    <i class="iconfont icon-31shouyexuanzhong"></i>
                    <p>学堂</p>
                </a>
            </li>
            <li>
                <a href="#" class="active">
                    <i class="iconfont icon-kecheng-"></i>
                    <!-- <p>课程</p> -->
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-shiti"></i>
                    <p>试题</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-31wode"></i>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </div>

    <!-- 6.手动引入轮播图脚本插件swiper.min.js -->
    <script src="libs/swiper.min.js"></script>
    <!-- 7.手动激活并配置轮播图 -->
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: 50000,//可选选项，自动滑动
            effect:"slide",//切换效果
            centeredSlides:true,//设定为true时，活动块会居中，默认局左
            slidesPerView : 3,//同屏展示个数
            spaceBetween : '5%',//每两个之间的间隙
            loop:true,//开启循环模式
            autoplayDisableOnInteraction:false,//避免手动切换后影响自动轮播
        })
    </script>
</body>
</html>